<div class="view-content">
  <div class="header-panel">
    <icon-button type="'help-circle'" size="1.2em" title="{{ vm.platformSvc.getI18nString(vm.Strings.Button.Help) }}"
                 on-click="vm.utilitySvc.handleEvent(vm.switchToHelpView)"></icon-button>
    <icon-button type="'settings'" size="1.2em" title="{{ vm.platformSvc.getI18nString(vm.Strings.Button.Settings) }}"
                 on-click="vm.utilitySvc.handleEvent(vm.switchToSettingsView)"></icon-button>
  </div>
  <div class="logo"></div>
  <div class="login-form-container animate-fade-in"
       ng-hide="vm.otherSyncsWarningVisible || vm.syncConfirmationVisible || vm.upgradeConfirmationVisible">
    <api-xbrowsersync-login-form execute-sync="vm.executeSync"
                                 ng-if="vm.selectedServiceType === vm.apiServiceType.xBrowserSync">
    </api-xbrowsersync-login-form>
  </div>
  <div class="confirm well well-sm animate-fade-in" ng-show="vm.syncConfirmationVisible">
    <h4>{{ vm.platformSvc.getI18nString(vm.Strings.View.Login.Sync.Confirm.Title) }}</h4>
    <p>{{ vm.platformSvc.getI18nString(vm.Strings.View.Login.Sync.Confirm.Content) }}</p>
    <div class="buttons">
      <button type="button" class="btn btn-default btn-confirm-enable-sync"
              ng-click="vm.utilitySvc.handleEvent(vm.confirmSync)">
        {{ vm.platformSvc.getI18nString(vm.Strings.Button.Confirm) }}
      </button>
      <button type="button" class="btn btn-default" ng-click="vm.setSyncConfirmationVisible(false)">
        {{ vm.platformSvc.getI18nString(vm.Strings.Button.Deny) }}
      </button>
    </div>
  </div>
  <div class="otherSyncsWarning confirm well well-sm animate-fade-in" ng-show="vm.otherSyncsWarningVisible">
    <h4>{{ vm.platformSvc.getI18nString(vm.Strings.View.Login.Sync.DisableOthers.Title) }}</h4>
    <p ng-if="vm.platformSvc.platformName === vm.platformType.Chromium"
       ng-bind-html="vm.platformSvc.getI18nString(vm.Strings.View.Login.Sync.DisableOthers.Content)"></p>
    <p ng-if="vm.platformSvc.platformName === vm.platformType.Firefox"
       ng-bind-html="vm.platformSvc.getI18nString(vm.Strings.View.Login.Sync.DisableOthers.Content)"></p>
    <div class="buttons">
      <button type="button" class="btn btn-default" ng-click="vm.utilitySvc.handleEvent(vm.dismissOtherSyncsWarning)">
        {{ vm.platformSvc.getI18nString(vm.Strings.Button.Continue) }}
      </button>
    </div>
  </div>
  <div class="confirm well well-sm animate-fade-in" ng-show="vm.upgradeConfirmationVisible">
    <div ng-if="vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName)">
      <h4>{{ vm.platformSvc.getI18nString(vm.Strings.View.Login.Sync.UpgradeRequired.Title) }}</h4>
      <div ng-bind-html="vm.platformSvc.getI18nString(vm.Strings.View.Login.Sync.UpgradeRequired.Content)"></div>
      <div class="buttons">
        <button type="button" class="btn btn-default" ng-click="vm.upgradeConfirmationVisible = false">
          {{ vm.platformSvc.getI18nString(vm.Strings.Button.OK) }}
        </button>
      </div>
    </div>
    <div ng-if="!vm.utilitySvc.isMobilePlatform(vm.platformSvc.platformName)">
      <h4>{{ vm.platformSvc.getI18nString(vm.Strings.View.Login.Sync.UpgradeReady.Title) }}</h4>
      <div ng-bind-html="vm.platformSvc.getI18nString(vm.Strings.View.Login.Sync.UpgradeReady.Content)"></div>
      <div class="buttons">
        <button type="button" class="btn btn-default btn-confirm-enable-sync"
                ng-click="vm.utilitySvc.handleEvent(vm.upgradeSync)">
          {{ vm.platformSvc.getI18nString(vm.Strings.Button.Confirm) }}
        </button>
        <button type="button" class="btn btn-default" ng-click="vm.upgradeConfirmationVisible = false">
          {{ vm.platformSvc.getI18nString(vm.Strings.Button.Deny) }}
        </button>
      </div>
    </div>
  </div>
</div>
